<template>
	<view class="content" :style="{paddingTop:`${safeTop}px`,height:`${barHeight}px`}"></view>
</template>

<script>
	export default {
		name: "StatusBar",
		data() {
			return {
				safeTop: 20,
				barHeight: 34
			};
		},
		onReady() {


		},
		mounted() {
			let res = uni.getSystemInfoSync()
			// console.log('on ready', res)
			// 手机屏幕的高度
			const screenHeight = res.screenHeight
			// 安全区高度
			const safeHeight = res.safeArea.height
			// 状态栏的高度
			const safeTop = res.safeArea.top
			this.safeTop = safeTop;
			this.barHeight = screenHeight - safeHeight - safeTop;
			this.barHeight = this.barHeight <= 0 ? 34 : this.barHeight;
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 80rpx;
		// background-color: blue;
	}
</style>